

:root{
  font-size: calc(100vw/3.75);
}
@media (min-width: 414px){
  :root{
    font-size: 110.4px;
  }
}

body{
  font-size: px(14);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  color: #433C3C;
  word-break: break-all;
  font-family: PingFang-SC-Medium, PingFang-SC,-apple-system,"Microsoft YaHei",SF UI Text,Helvetica Neue,Helvetica,Arial,sans-serif;
  background: #262626;
}

::-webkit-scrollbar{
  width: 5px;
}

.app-main{
  min-height: 100vh;
  position: relative;
  margin: auto;
  max-width: $max-width;
  box-shadow: 0 0 px(5) rgba(0,0,0,.1);
  overflow: hidden;
  background: #f5f5f5;
  &.showTabBar{
    .page{
      //padding-bottom: .7rem;
    }
  }
}

.page{
  min-height: 100vh;
  color: #343433;
  line-height: 1.4;
  font-size: px(14);
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  background: #f5f5f5;
  .van-nav-bar{
    position: fixed;
    top: 0;
    left: 50%;
    width: 100%;
    max-width: $max-width;
    transform: translateX(-50%);
    z-index: 5;
    &+*{
      margin-top: px(46);
    }
  }
}

button{
  padding: 0;
  background: none;
  border: none;
  box-sizing: content-box;
  color: inherit;
  border-radius: inherit;
  &:after{
    display: none;
  }
}
.button-hover{
  opacity: .7;
}

input{
  border: 0;
  box-sizing: border-box;
}

.input-placeholder,
input::-webkit-input-placeholder{
  color: #999;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

a{
  color: inherit;
}

b{
  font-weight: 500;
}

.flex{
  display: flex;
  align-items: center;
  &.v-top{
    align-items: flex-start;
  }
  &.v-end{
    align-items: flex-end;
  }
  &.wrap{
    flex-wrap: wrap;
  }
  &.h-between{
    justify-content: space-between;
  }
  &.h-center{
    justify-content: center;
  }
  &.column {
    flex-flow: column;
  }

  .flex-right {
    margin-left: auto;
  }
}
.flex-1{
  flex: 1;
  overflow: hidden;
}

$spacing: px(5);
@for $i from 0 through 10 {
  .m-#{$i} {margin: $spacing * $i !important;}
  .p-#{$i} {padding: $spacing * $i !important;}
  .mt-#{$i} {margin-top: $spacing * $i !important;}
  .mr-#{$i} {margin-right: $spacing * $i !important;}
  .mb-#{$i} {margin-bottom: $spacing * $i !important;}
  .ml-#{$i} {margin-left: $spacing * $i !important;}
  .pt-#{$i} {padding-top: $spacing* $i !important;}
  .pr-#{$i} {padding-right: $spacing * $i !important;}
  .pb-#{$i} {padding-bottom: $spacing * $i !important;}
  .pl-#{$i} {padding-left: $spacing * $i !important;}
  .mx-#{$i} {margin-left: $spacing * $i !important;margin-right: $spacing * $i !important;}
  .my-#{$i} {margin-top: $spacing * $i !important;margin-bottom: $spacing * $i !important;}
  .px-#{$i} {padding-left: $spacing * $i !important;padding-right: $spacing * $i !important;}
  .py-#{$i} {padding-top: $spacing * $i !important;padding-bottom: $spacing * $i !important;}
}
.text-left{text-align: left;}
.text-center{text-align: center;}
.text-right{text-align: right;}
.text-nowrap{white-space: nowrap;}
.text-ellipsis{white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.color-primary{color: $color-primary;}
.color-secondary{color: $color-secondary;}
.color-success{color: $color-success;}
.color-gray{color: $color-gray;}
.color-danger{color: $color-danger;}
.color-warning{color: $color-warning;}
.color-white{color: #fff;}
.bg-white{background-color: #fff;}
.box-shadow{box-shadow: $box-shadow;}

.fs-10{font-size: px(10) !important;}
.fs-11{font-size: px(11) !important;}
.fs-12{font-size: px(12) !important;}
.fs-13{font-size: px(13) !important;}
.fs-14{font-size: px(14) !important;}
.fs-15{font-size: px(15) !important;}
.fs-16{font-size: px(16) !important;}
.fs-18{font-size: px(18) !important;}
.b{font-weight: bold;};


@keyframes fade-in {
  0%{opacity: 0;}
  100%{opacity: 1;}
}
@keyframes fade-out {
  0%{opacity: 1;}
  100%{opacity: 1;}
}

@keyframes show-in {
  0%{transform: translateY(100%);}
  100%{transform: translateY(0);}
}
@keyframes show-out {
  0%{transform: translateY(0);}
  100%{transform: translateY(100%);}
}
@keyframes fade-out{
  0%{opacity: 100%;}
  100%{opacity: 0;}
}

.p-btn-fixed{
  position: fixed;
  bottom: 0;
  left: 50%;
  width: 100%;
  max-width: $max-width;
  z-index: 5;
  background: #fff;
  padding: px(7) px(15);
  box-sizing: border-box;
  border-top: solid px(1) #f2f2f2;
  transition: bottom .3s;
  transform: translateX(-50%);
}


.divider{
  height: px(1);
  background: #F0F0F0;
}
.divider-dashed{
  height: 0;
  background: none;
  border-bottom: .01rem #F0F0F0 dashed;
}
.divider-v{
  width: px(1);
  background: #F0F0F0;
}

.block{
  display: block;
}

.x-padding-bottom{
  pointer-events: none;
  padding-bottom: env(safe-area-inset-bottom);
}

.p-search-box{
  display: flex;
  align-items: center;
  border-radius: px(20);
  .inp{
    display: block;
    padding: 0 px(15);
    height: px(40);
    line-height: px(40);
    width: 100%;
    box-sizing: border-box;
    border: 0;
    background: none;
  }
  .icon{
    width: px(25);
    height: px(25);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 0 px(3);
    &.icon-1{
      background-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E %3Csvg width='51px' height='49px' viewBox='0 0 51 49' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cdefs%3E %3Cfilter x='-3.9%25' y='-33.8%25' width='107.9%25' height='167.5%25' filterUnits='objectBoundingBox' id='filter-1'%3E %3CfeOffset dx='0' dy='4' in='SourceAlpha' result='shadowOffsetOuter1'%3E%3C/feOffset%3E %3CfeGaussianBlur stdDeviation='5' in='shadowOffsetOuter1' result='shadowBlurOuter1'%3E%3C/feGaussianBlur%3E %3CfeColorMatrix values='0 0 0 0 0.929885643 0 0 0 0 0.929885643 0 0 0 0 0.929885643 0 0 0 0.5 0' type='matrix' in='shadowBlurOuter1' result='shadowMatrixOuter1'%3E%3C/feColorMatrix%3E %3CfeMerge%3E %3CfeMergeNode in='shadowMatrixOuter1'%3E%3C/feMergeNode%3E %3CfeMergeNode in='SourceGraphic'%3E%3C/feMergeNode%3E %3C/feMerge%3E %3C/filter%3E %3C/defs%3E %3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg transform='translate(-644.000000, -518.000000)' fill='%23999999' fill-rule='nonzero'%3E %3Cg filter='url(%23filter-1)' transform='translate(32.000000, 499.000000)'%3E %3Cg transform='translate(622.000000, 25.000000)'%3E %3Cpath d='M31.6748894,28.0566802 L25.8358315,22.145749 L25.7958379,22.1052632 C27.2755992,19.8380567 28.1554572,17.1255061 28.1554572,14.2510121 C28.1554572,6.39676113 21.8364768,0 14.0777286,0 C6.31898045,0 0,6.3562753 0,14.2105263 C0,22.0647773 6.31898045,28.4615385 14.0777286,28.4615385 C16.9172705,28.4615385 19.516851,27.611336 21.7164961,26.1538462 L20.0367671,24.4534413 C18.2770511,25.5060729 16.2373802,26.1133603 14.0777286,26.1133603 C7.59877396,26.1133603 2.31962574,20.7692308 2.31962574,14.2105263 C2.31962574,7.65182186 7.59877396,2.30769231 14.0777286,2.30769231 C20.5566832,2.30769231 25.8358315,7.65182186 25.8358315,14.2105263 C25.8358315,17.2874494 24.6360251,20.1214575 22.7163348,22.2267206 L24.0361219,23.562753 C24.0761154,23.6437247 24.1161089,23.6842105 24.196096,23.7651822 L30.0351539,29.6761134 C30.2751152,29.9190283 30.55507,30 30.8350249,30 C31.1149797,30 31.4349281,29.8785425 31.6348958,29.6761134 C32.1148184,29.2307692 32.1148184,28.5020243 31.6748894,28.0566802 Z'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
    }
    &.icon-2{
      background-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E %3Csvg width='48px' height='48px' viewBox='0 0 48 48' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cdefs%3E %3Cfilter x='-3.9%25' y='-33.8%25' width='107.9%25' height='167.5%25' filterUnits='objectBoundingBox' id='filter-1'%3E %3CfeOffset dx='0' dy='4' in='SourceAlpha' result='shadowOffsetOuter1'%3E%3C/feOffset%3E %3CfeGaussianBlur stdDeviation='5' in='shadowOffsetOuter1' result='shadowBlurOuter1'%3E%3C/feGaussianBlur%3E %3CfeColorMatrix values='0 0 0 0 0.929885643 0 0 0 0 0.929885643 0 0 0 0 0.929885643 0 0 0 0.5 0' type='matrix' in='shadowBlurOuter1' result='shadowMatrixOuter1'%3E%3C/feColorMatrix%3E %3CfeMerge%3E %3CfeMergeNode in='shadowMatrixOuter1'%3E%3C/feMergeNode%3E %3CfeMergeNode in='SourceGraphic'%3E%3C/feMergeNode%3E %3C/feMerge%3E %3C/filter%3E %3Cpath d='M15,0.777777778 C22.8547164,0.777777778 29.2222222,7.14528356 29.2222222,15 C29.2222222,22.8547164 22.8547164,29.2222222 15,29.2222222 C7.14528356,29.2222222 0.777777778,22.8547164 0.777777778,15 C0.777777778,7.14528356 7.14528356,0.777777778 15,0.777777778 Z M20.6461185,9.35018777 C20.2989858,9.00305507 19.7361725,9.00305507 19.3890398,9.35018777 L19.3890398,9.35018777 L14.9892643,13.7499633 L10.5894887,9.35018777 C10.242356,9.00305507 9.67954271,9.00305507 9.33241001,9.35018777 C8.9852773,9.69732047 8.9852773,10.2601338 9.33241001,10.6072665 L9.33241001,10.6072665 L13.7321855,15.007042 L9.33241001,19.4068175 C8.9852773,19.7539502 8.9852773,20.3167636 9.33241001,20.6638963 C9.67954271,21.011029 10.242356,21.011029 10.5894887,20.6638963 L10.5894887,20.6638963 L14.9892643,16.2641207 L19.3890398,20.6638963 C19.7361725,21.011029 20.2989858,21.011029 20.6461185,20.6638963 C20.9932512,20.3167636 20.9932512,19.7539502 20.6461185,19.4068175 L20.6461185,19.4068175 L16.246343,15.007042 L20.6461185,10.6072665 C20.9932512,10.2601338 20.9932512,9.69732047 20.6461185,9.35018777 Z' id='path-2'%3E%3C/path%3E %3C/defs%3E %3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg transform='translate(-595.000000, -519.000000)'%3E %3Cg filter='url(%23filter-1)' transform='translate(32.000000, 499.000000)'%3E %3Cg id='clear' transform='translate(572.000000, 25.000000)'%3E %3Cmask id='mask-3' fill='white'%3E %3Cuse xlink:href='%23path-2'%3E%3C/use%3E %3C/mask%3E %3Cuse fill='%23D7D7D7' xlink:href='%23path-2'%3E%3C/use%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
    }
  }
}

.p-icon{
  width: px(16);
  height: px(16);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.p-icon-arrow{
  width: px(6);
  height: px(11);
  background-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E %3Csvg width='12px' height='21px' viewBox='0 0 12 21' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg transform='translate(-707.000000, -409.000000)' fill='%23C5C3C2' fill-rule='nonzero'%3E %3Cg transform='translate(0.000000, 369.000000)'%3E %3Cpath d='M722.674823,45.3101565 C723.104042,45.7279196 723.108987,46.4101283 722.685865,46.8339117 L713.882311,55.6153388 C713.863758,55.6371106 713.844193,55.6583314 713.823615,55.6789409 C713.400494,56.1027243 712.709535,56.1076069 712.280316,55.6898433 L703.330235,46.9403266 C703.149647,46.7697663 703.036219,46.5431503 703.007323,46.3006037 L703,46.1781907 C703.002895,45.9406873 703.082883,45.7116995 703.226212,45.5239852 L703.3197,45.4165715 C703.743502,44.994377 704.433125,44.989506 704.863,45.405669 L713.034,53.394 L721.131523,45.3210591 C721.554645,44.8972757 722.245604,44.8923931 722.674823,45.3101565 Z' transform='translate(713.000000, 50.500000) rotate(-90.000000) translate(-713.000000, -50.500000) '%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
  &.bottom{
    width: px(11);
    height: px(11);
    transform: rotate(90deg);
  }
}
.p-icon-share{
  background-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E %3Csvg width='32px' height='32px' viewBox='0 0 32 32' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg transform='translate(-618.000000, -357.000000)'%3E %3Cg transform='translate(618.000000, 357.000000)'%3E %3Cellipse fill='%23FFCB00' cx='18' cy='21.5' rx='11' ry='10.5'%3E%3C/ellipse%3E %3Cpath d='M16.0000186,-3.12885633e-06 L16.0000186,-3.12885633e-06 C16.7511257,-3.12885633e-06 17.3600201,0.608894459 17.3600201,1.36000158 C17.3600202,2.11110871 16.7511257,2.72000317 16.0000186,2.72000317 L16.0000179,2.72000317 C8.66407188,2.72000349 2.71709621,8.66697884 2.71709621,16.0029249 C2.71709621,16.0029249 2.71709621,16.0029249 2.71709621,16.0029249 C2.71709621,23.336746 8.66329063,29.2815029 15.9985492,29.2815029 L15.9985498,29.2815029 C23.3344958,29.2815198 29.2814715,23.3345585 29.2815027,15.9986124 C29.2815027,15.9985916 29.2815027,15.9985708 29.2815027,15.9985499 L29.2815027,15.9985502 C29.2466042,15.2482524 29.8265502,14.6117267 30.5768449,14.5768266 C31.3271426,14.5419282 31.9636683,15.1218742 31.9985684,15.8721688 C32.0005267,15.914272 32.0005267,15.9564436 31.9985684,15.9985467 C31.9985684,24.834932 24.8349351,31.9985654 15.9985498,31.9985654 C7.16363326,31.9985654 -8.07870232e-08,24.834932 -8.07870232e-08,15.9985467 C-8.07870232e-08,7.16363021 7.16363326,-3.12885633e-06 16.0000185,-3.12885633e-06 L16.0000186,-3.12885633e-06 Z M24.2342157,6.80291417 L24.2342157,6.80291415 C23.7448495,6.24907913 23.7971121,5.40340002 24.3509461,4.91403383 C24.861153,4.46321768 25.6285195,4.46734893 26.133842,4.92363209 L28.4756572,7.26838482 L28.4756573,7.26838493 C29.18178,7.97327637 29.1827769,9.11713083 28.4778866,9.82325353 C28.4771441,9.82399735 28.4764009,9.82474054 28.4756571,9.82548306 L26.1338418,12.1672983 L26.1338419,12.1672983 C25.6116725,12.6886551 24.7657278,12.6879989 24.2443709,12.1658295 C23.7230141,11.6436602 23.7236703,10.7977154 24.2458396,10.2763586 L24.6429338,9.88073313 L22.9178381,9.88073313 C18.2269264,9.88073313 16.6342058,11.8778292 16.6342058,17.9171175 L16.6342058,17.9171199 C16.6375607,18.6537583 16.0431176,19.2536402 15.3064792,19.2570072 C14.9487569,19.2586226 14.6053753,19.1164916 14.35345,18.862521 L14.35345,18.862521 C14.1030507,18.611687 13.9627808,18.2715078 13.9636022,17.9170824 C13.9636022,10.4494487 16.6894527,7.21016372 22.9178037,7.21016372 L24.641462,7.21016372 L24.2341803,6.802882 L24.2342157,6.80291417 Z' fill='%23343433' fill-rule='nonzero'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
}
.p-icon-close{
  position: relative;
  &:before,&:after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(45deg);
    width: px(15);
    height: px(1);
    background: $color-gray;
  }
  &:after{
    transform: translate(-50%,-50%) rotate(-45deg);
  }
}

.switch{
  position: relative;
  display: block;
  width: px(44);
  height: px(22);
  border-radius: px(22);
  background: #eee;
  transition: all .3s;
  cursor: pointer;
  -webkit-appearance: none;
  &:before{
    content: "";
    position: absolute;
    top: 50%;
    left: px(2);
    width:px(19);
    height:px(19);
    border-radius: 50%;
    background: #fff;
    transform: translateY(-50%);
    transition: all .3s;
    box-shadow: px(1.5) px(1.5) px(1.5) rgba(0,0,0,.2);
    box-sizing: border-box;
  }
  &:checked{
    background: $color-primary;
    border-color: $color-primary;
    &:before{
      left: px(23);
      border-color: #fff;
    }
  }
}

.checkbox{
  position: relative;
  width:px(15);
  height:px(15);
  border: solid px(1) #ccc;
  border-radius: px(2);
  &:checked{
    background: $color-primary;
    border-color: $color-primary;
    &:before{
      content: "";
      position: absolute;
      top: 40%;
      left: 50%;
      width: px(10);
      height: px(5);
      transform: translate(-50%,-50%) rotate(-45deg);
      border-bottom: solid px(1) #fff;
      border-left: solid px(1) #fff;
    }
  }
  &.disabled{
    &.checked{
      background: #ccc;
      border-color: #ccc;
    }
  }
}

.radio{
  display: block;
  margin: 0;
  -webkit-appearance: none;
  width: px(16);
  height: px(16);
  position: relative;
  border-radius: 50%;
  border: solid px(1) #ccc;
  background: none;
  &:checked{
    background: $color-primary;
    border-color: $color-primary;
    &:before{
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      width: px(8);
      height: px(8);
      border-radius: 50%;
      background: #fff;
    }
  }
}

.p-icon-arrow,
.p-icon-down,
.p-icon-edit,
.p-icon-delete{
  display: block;
  width: px(18);
  height: px(18);
  background: #3D3C43;
  mask-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E %3Csvg width='px(16)' height='px(16)' viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Ctitle%3E矩形%3C/title%3E %3Cg id='加群好友' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg id='加群用户为好友' transform='translate(-329.000000, -132.000000)' fill-rule='nonzero'%3E %3Cg id='right-circle备份-5' transform='translate(329.000000, 132.000000)'%3E %3Crect id='矩形' fill='%23000000' opacity='0' x='0' y='0' width='16' height='16'%3E%3C/rect%3E %3Cpath d='M11.9160305,8.50380954 L5.65648855,4.03836186 C5.5216285,3.94303208 5.33333333,4.03585318 5.33333333,4.20142596 L5.33333333,5.37799616 C5.33333333,5.63388137 5.45801527,5.87722318 5.6692112,6.02774389 L9.36895674,8.66687364 L5.6692112,11.3060034 C5.45801527,11.4565241 5.33333333,11.6973572 5.33333333,11.9557511 L5.33333333,13.1323213 C5.33333333,13.2953854 5.5216285,13.3907152 5.65648855,13.2953854 L11.9160305,8.82993774 C12.0279898,8.74966003 12.0279898,8.58408725 11.9160305,8.50380954 Z' id='路径' fill='%233D3C43'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
}
.p-icon-arrow{
  width: px(16);
  height: px(16);
}
.p-icon-edit{
  mask-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E %3Csvg width='36rpx' height='36rpx' viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Ctitle%3E矩形%3C/title%3E %3Cg id='自动进群' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg id='自动进群-已添加关键词' transform='translate(-304.000000, -298.000000)' fill-rule='nonzero'%3E %3Cg id='editor备份-3' transform='translate(304.000000, 298.000000)'%3E %3Crect id='矩形' fill='%23000000' opacity='0' x='0' y='0' width='18' height='18'%3E%3C/rect%3E %3Cpath d='M11.9287669,3.66666674 L11.9287669,4.76666676 L4.03333343,4.76666676 L4.03333343,12.8333336 L12.8333336,12.8333336 L12.8333336,8.80000019 L13.9333334,8.80000019 L13.9333334,12.8333336 C13.9333334,13.4408469 13.4408469,13.9333336 12.8333336,13.9333336 L4.03333343,13.9333336 C3.42582019,13.9333336 2.9333334,13.4408469 2.9333334,12.8333336 L2.9333334,4.76666676 C2.9333334,4.15915353 3.42582019,3.66666674 4.03333343,3.66666674 L11.9287669,3.66666674 Z M14.2791003,4.08320009 L15.0542337,4.86346677 L9.1465002,10.7294002 L9.1487002,10.7316002 L8.34790018,10.7587336 L8.37063352,9.94620022 L8.37210018,9.94803355 L14.2791003,4.08320009 L14.2791003,4.08320009 Z' id='形状' fill='%233D3C43' opacity='0.5'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
}
.p-icon-delete{
  mask-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E %3Csvg width='36rpx' height='36rpx' viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Ctitle%3E矩形%3C/title%3E %3Cg id='自动进群' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg id='自动进群-已添加关键词' transform='translate(-327.000000, -298.000000)' fill-rule='nonzero'%3E %3Cg id='ashbin备份-3' transform='translate(327.000000, 298.000000)'%3E %3Crect id='矩形' fill='%23000000' opacity='0' x='0' y='0' width='18' height='18'%3E%3C/rect%3E %3Cpath d='M5.86116679,6.78333349 L6.33820014,13.545767 L11.0102669,13.545767 L11.4869336,6.78333349 L12.5887669,6.78333349 L12.1073336,13.6231336 C12.0667224,14.1991136 11.5876768,14.6456572 11.0102669,14.645767 L6.33820014,14.645767 C5.76065866,14.6456436 5.28156134,14.1988917 5.24113345,13.622767 L4.75896676,6.78333349 L5.86116679,6.78333349 Z M8.25550018,7.12396682 L8.25550018,12.2573003 L7.15550016,12.2573003 L7.15550016,7.12396682 L8.25550018,7.12396682 Z M10.2666669,7.12396682 L10.2666669,12.2573003 L9.16666686,12.2573003 L9.16666686,7.12396682 L10.2666669,7.12396682 Z M3.11666673,4.95000011 L14.1166667,4.95000011 L14.1166667,6.05000013 L3.11666673,6.05000013 L3.11666673,4.95000011 Z M10.9109002,3.11666673 L10.9109002,4.21666675 L6.51090014,4.21666675 L6.51090014,3.11666673 L10.9109002,3.11666673 Z' id='形状' fill='%233D3C43' opacity='0.5'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
}

.p-footer{
  position: fixed;
  bottom: 0;
  left: 50%;
  width: 100%;
  max-width: $max-width;
  transform: translateX(-50%);
  padding: px(15) px(20);
  padding-bottom: calc(.15rem + env(safe-area-inset-bottom));
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 px(-1) px(4) 0 rgba(0, 0, 0, 0.06);
  z-index: 5;
  box-sizing: border-box;
  .btn{
    margin: 0 0 0 px(25);
    display: block;
    width: px(114);
    height: px(28);
    line-height: px(26);
    background: #FFFFFF;
    border-radius: px(14);
    font-size: px(14);
    border: px(1) solid $color-primary;
    color: $color-primary;
    &:first-child{
      margin-left: 0;
    }
    &.auto{
      width: auto;
      padding: 0 px(15);
    }
    &.gray{
      border-color: #433C3C;
      color: #433C3C;
    }
    &.fill{
      background-color: $color-primary;
      color: #fff;
    }
    &.grays {
      border-color: $color-gray;
      color: $color-gray;
    }
  }
  &.h-end{
    justify-content: flex-end;
  }
}

.p-num{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 px(2);
  min-width: px(16);
  height: px(16);
  line-height: px(16);
  border-radius: px(16);
  font-size: px(12);
  color: #9f9ea2;
  text-align: center;
  border: solid 1px #9f9ea2;
  box-sizing: border-box;
}

.p-icon-arrow,
.p-icon-down,
.p-icon-edit,
.p-icon-delete{
  display: block;
  width: 32rpx;
  height: 32rpx;
  background: #3D3C43;
  mask-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E %3Csvg width='32rpx' height='32rpx' viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Ctitle%3E矩形%3C/title%3E %3Cg id='加群好友' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg id='加群用户为好友' transform='translate(-329.000000, -132.000000)' fill-rule='nonzero'%3E %3Cg id='right-circle备份-5' transform='translate(329.000000, 132.000000)'%3E %3Crect id='矩形' fill='%23000000' opacity='0' x='0' y='0' width='16' height='16'%3E%3C/rect%3E %3Cpath d='M11.9160305,8.50380954 L5.65648855,4.03836186 C5.5216285,3.94303208 5.33333333,4.03585318 5.33333333,4.20142596 L5.33333333,5.37799616 C5.33333333,5.63388137 5.45801527,5.87722318 5.6692112,6.02774389 L9.36895674,8.66687364 L5.6692112,11.3060034 C5.45801527,11.4565241 5.33333333,11.6973572 5.33333333,11.9557511 L5.33333333,13.1323213 C5.33333333,13.2953854 5.5216285,13.3907152 5.65648855,13.2953854 L11.9160305,8.82993774 C12.0279898,8.74966003 12.0279898,8.58408725 11.9160305,8.50380954 Z' id='路径' fill='%233D3C43'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
}
.p-icon-edit{
  mask-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E %3Csvg width='36rpx' height='36rpx' viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Ctitle%3E矩形%3C/title%3E %3Cg id='自动进群' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg id='自动进群-已添加关键词' transform='translate(-304.000000, -298.000000)' fill-rule='nonzero'%3E %3Cg id='editor备份-3' transform='translate(304.000000, 298.000000)'%3E %3Crect id='矩形' fill='%23000000' opacity='0' x='0' y='0' width='18' height='18'%3E%3C/rect%3E %3Cpath d='M11.9287669,3.66666674 L11.9287669,4.76666676 L4.03333343,4.76666676 L4.03333343,12.8333336 L12.8333336,12.8333336 L12.8333336,8.80000019 L13.9333334,8.80000019 L13.9333334,12.8333336 C13.9333334,13.4408469 13.4408469,13.9333336 12.8333336,13.9333336 L4.03333343,13.9333336 C3.42582019,13.9333336 2.9333334,13.4408469 2.9333334,12.8333336 L2.9333334,4.76666676 C2.9333334,4.15915353 3.42582019,3.66666674 4.03333343,3.66666674 L11.9287669,3.66666674 Z M14.2791003,4.08320009 L15.0542337,4.86346677 L9.1465002,10.7294002 L9.1487002,10.7316002 L8.34790018,10.7587336 L8.37063352,9.94620022 L8.37210018,9.94803355 L14.2791003,4.08320009 L14.2791003,4.08320009 Z' id='形状' fill='%233D3C43' opacity='0.5'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
}
.p-icon-delete{
  mask-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E %3Csvg width='36rpx' height='36rpx' viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Ctitle%3E矩形%3C/title%3E %3Cg id='自动进群' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg id='自动进群-已添加关键词' transform='translate(-327.000000, -298.000000)' fill-rule='nonzero'%3E %3Cg id='ashbin备份-3' transform='translate(327.000000, 298.000000)'%3E %3Crect id='矩形' fill='%23000000' opacity='0' x='0' y='0' width='18' height='18'%3E%3C/rect%3E %3Cpath d='M5.86116679,6.78333349 L6.33820014,13.545767 L11.0102669,13.545767 L11.4869336,6.78333349 L12.5887669,6.78333349 L12.1073336,13.6231336 C12.0667224,14.1991136 11.5876768,14.6456572 11.0102669,14.645767 L6.33820014,14.645767 C5.76065866,14.6456436 5.28156134,14.1988917 5.24113345,13.622767 L4.75896676,6.78333349 L5.86116679,6.78333349 Z M8.25550018,7.12396682 L8.25550018,12.2573003 L7.15550016,12.2573003 L7.15550016,7.12396682 L8.25550018,7.12396682 Z M10.2666669,7.12396682 L10.2666669,12.2573003 L9.16666686,12.2573003 L9.16666686,7.12396682 L10.2666669,7.12396682 Z M3.11666673,4.95000011 L14.1166667,4.95000011 L14.1166667,6.05000013 L3.11666673,6.05000013 L3.11666673,4.95000011 Z M10.9109002,3.11666673 L10.9109002,4.21666675 L6.51090014,4.21666675 L6.51090014,3.11666673 L10.9109002,3.11666673 Z' id='形状' fill='%233D3C43' opacity='0.5'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
}

.relative {
  position: relative;
}
.p-card{
  box-shadow: 0 px(1) px(1) rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  background: #fff;
}

.go-home-blank{
  height: px(38);
}

.pointer{
  cursor: pointer;
}

/* 单行省略 */
.text-flow {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}